<template>
  <div>
    <van-form>
      <!-- 客户 -->
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="客户"
          label="客户"
          placeholder="请选择客户"
          :rules="[{ required: true, message: '请填写客户' }]"
          @click="get_customer"
        >
        </van-field>
        <!-- 客户信息 -->
        <div v-show="bol">
          <p v-html="customer_name"></p>
          <p v-html="customer_id"></p>
          <p v-html="customer_phone"></p>
        </div>
      </van-cell-group>
      <!-- 产品 -->
      <van-cell-group inset>
        <van-field
          name="产品"
          label="产品"
          placeholder="请选择产品"
          @click="choose_pro"
        >
        </van-field>
        <div v-show="constract_bol">
          <p v-html="constract_name"></p>
          <p>产品周期:{{ constract_time }}</p>
          <p>收益率:{{ constract_rate }}</p>
          <p>起诉金额:{{ constract_money }}</p>
          <p>可投上线:无上限</p>
        </div>
      </van-cell-group>
      <!-- 合同号 -->
      <van-cell-group inset>
        <van-field
          name="合同号"
          label="合同号"
          placeholder="请输入合同号"
          v-model="constract_no"
        >
        </van-field>
      </van-cell-group>
      <!-- 客户银行卡 -->
      <van-cell-group inset>
        <van-field
          name="客户银行卡"
          label="客户银行卡"
          placeholder="请输入客户银行卡"
        >
        </van-field>
        <div v-show="bol">
          <p>{{ bank_name }}</p>
          <p>支行:{{ bank_sum_name }}</p>
          <p>卡号:{{ bank_num }}</p>
        </div>
      </van-cell-group>
      <!-- 合同金额 -->
      <van-cell-group inset>
        <van-field name="合同金额" label="合同" placeholder="请输入合同金额">
        </van-field>
      </van-cell-group>
      <!-- 签约日期 -->
      <div>
        <van-cell title="选择单个日期" :value="date" @click="show = true" />
        <van-calendar v-model:show="show" @confirm="onConfirm" />
      </div>
      <!-- 起收益日期 -->
      <div>
        <van-cell title="选择单个日期" :value="date1" @click="show1 = true" />
        <van-calendar v-model:show="show1" @confirm="onConfirm1" />
      </div>
      <!-- 支付方式 -->
      <van-radio-group v-model="checked" direction="horizontal">
        <van-radio name="1">常规</van-radio>
        <van-radio name="2">通联</van-radio>
      </van-radio-group>
      <!-- 付款方式 -->
      <van-radio-group v-model="pay_checked" direction="horizontal">
        <van-radio name="1">银行转账</van-radio>
        <van-radio name="2">POS刷卡</van-radio>
        <van-radio name="3">转存</van-radio>
      </van-radio-group>
      <!-- 到账公户 -->
      <van-cell-group inset>
        <van-field
          name="到账公户"
          label="到账公户"
          placeholder="请输入公户"
          v-model="account_user"
        >
        </van-field>
        <van-cell is-link title="基础用法" @click="show_toast = true" />
        <van-action-sheet
          v-model:show="show_toast"
          :actions="actions"
          @select="onSelect"
        />
      </van-cell-group>
      <!-- 金额 -->
      <van-cell-group inset>
        <van-field name="金额" label="金额" placeholder="请输入金额">
        </van-field>
      </van-cell-group>
      <!-- 手续费 -->
      <van-cell-group inset>
        <van-field name="手续费" label="手续费" placeholder="请输入手续费">
        </van-field>
      </van-cell-group>
      <!-- 支付凭证 -->
      <van-uploader :after-read="afterRead" />
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, inject, computed, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
import apis from "../utils/api_nots";
import axios from "axios";
const router = useRouter();
const get_customer = (): any => {
  router.push("/sel_user");
};
const username = ref<string>("");
// 是否显示客户的消息
let bol = ref<boolean>(false);
let customer_name = ref<string>("");
let customer_id = ref<string>("");
let customer_phone = ref<string>("");
let bank_name = ref<string>("");
let bank_num = ref<string>("");
let bank_sum_name = ref<string>("");
// 是否展示合同的信息
let constract_bol = ref<boolean>(false);
let constract_name = ref<string>("");
let constract_time = ref<string>("");
let constract_rate = ref<string>("");
let constract_money = ref<string>("");
let constract_no = ref<string>("1");
// 选择客户
onMounted(() => {
  const customer_user = JSON.parse(localStorage.getItem("customer_user"));
  // console.log(customer_user)
  if (customer_user != null) {
    bol.value = true;
    customer_name.value = customer_user.name;
    customer_id.value = customer_user.id_number;
    customer_phone.value = customer_user.contact_manner;
    bank_name.value = customer_user.bank_name;
    bank_num.value = customer_user.bank_num;
    bank_sum_name.value = customer_user.bank_sum_name;
  }
  // 获取class_id，从而获取合同信心
  const contract_infor = JSON.parse(localStorage.getItem("contract_infor"));
  const product_class_id = contract_infor.class_id;
  if (product_class_id != null) {
    constract_bol.value = true;
    // 设置数据反显
    constract_name.value = contract_infor.name;
    constract_time.value = contract_infor.product_time;
    constract_rate.value = contract_infor.rate;
    constract_money.value = contract_infor.money;
    apis
      .get_contract({
        product_class_id: product_class_id,
      })
      .then((res: any): void => {
        constract_no.value = res.data.data.contract_no;
      });
  }
});
const choose_pro = (): any => {
  router.push("/sel_pro");
};
const date = ref<string>("");
const show = ref<boolean>(false);
const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (value: any) => {
  show.value = false;
  date.value = formatDate(value);
};

const date1 = ref<string>("");
const show1 = ref<boolean>(false);
const formatDate1 = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm1 = (value: any) => {
  show1.value = false;
  date1.value = formatDate1(value);
};
// 支付方式
const checked = ref<string>("1");
const pay_checked = ref<string>("1");
// 到账公户
const account_user = ref<string>("");
const show_toast = ref<boolean>(false);
const actions = [
  { name: "默认" },
  { name: "测试账户" },
  { name: "通联账户" },
  { name: "青岛尚锦资产管理有限公司" },
];
const onSelect = (item: any) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show_toast.value = false;
  account_user.value = item.name;
};
// 支付凭证上传
const afterRead = (file: any) => {
  console.log(file.file)
  const formData = new FormData(); // 下面有备注
  formData.append("file", file.file);
  // 此时可以自行将文件上传至服务器
  const userInfor = JSON.parse(localStorage.getItem("vuex") || "{}");
  const token = userInfor.userInfor.token;
  axios.defaults.headers.common["token"] = token;
  axios
    .post(
      "https://bd.php.huaxinestates.com/api/file/uploadImgFromUserApi",
      formData,
      { headers: { "Content-Type": "multipart/form-data" } }
    )
    .then((res) => {
      console.log(res);
    });
};
</script>

<style></style>
